<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">


        <style>
            body {
                padding-top: 60px;
                padding-bottom: 40px;
            }
        </style>
        <link rel="stylesheet" href="css/bootstrap-responsive.min.css">
        <link rel="stylesheet" href="css/main.css">

        <script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
    </head>
    <body>

                <div class="span6">
                    <h2>Carte de Québec</h2>
							
					<script
					src="http://maps.googleapis.com/maps/api/js?key=AIzaSyANd_ldQ9XCXKkEm0hNJT9idffBfsX-z-E&sensor=false&libraries=geometry">
					</script>

					<script>
					function Collision(C1,C2)
					{					   
					   var t1 = new google.maps.LatLng(C1.lat,C1.lon);
					   var t2 = new google.maps.LatLng(C2.lat,C2.lon);
					   var penis = google.maps.geometry.spherical.computeDistanceBetween(t1, t2);

					   if ( penis > (C1.rayon+C2.rayon))
						{
						  return false;
						}
					   else
						{

							if( penis < C1.rayon)
							{
								return (((C1.rayon - penis) + C2.rayon) /(C2.rayon *2)).toFixed(4) * 100
							}
							else if (penis < C2.rayon)
							{
								return (((C2.rayon - penis) + C1.rayon) /(C1.rayon *2)).toFixed(4) * 100
							}
							

							return (((C1.rayon+C2.rayon)-penis) / (C1.rayon+C2.rayon)).toFixed(4) * 100;
						}
					}
					

					
					
					function initialize()
					{
					window.cercles = new Array();
					cercles.push("monPenis");
					var mapProp = {
					  center:new google.maps.LatLng(46.812514,-71.288567),
					  zoom:11,
					  mapTypeId:google.maps.MapTypeId.ROADMAP
					  };	
						var cercle1 = new Object();
						cercle1.lat =46.845643;
						cercle1.lon =-71.208567;
						cercle1.rayon=4000;
						cercle1.couleur ="#006699";
						
						var cercle2 = new Object();
						cercle2.lat =46.875643;
						cercle2.lon =-71.208567;
						cercle2.rayon=4000;
						cercle2.couleur ="#002299";
						
						window.map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
						afficherCercle(cercle1.lat,cercle1.lon,cercle1.couleur,cercle1.rayon);//81000

						afficherCercle(cercle2.lat,cercle2.lon,cercle2.couleur,cercle2.rayon);//81000


						document.getElementById('inner').innerHTML =(Collision(cercle1,cercle2));
					}
					
					function initialize2()
					{
						var cercle1 = new Object();
						cercle1.lat =Number(document.getElementById('latitu').value);
						cercle1.lon =Number(document.getElementById('longitu').value);
						cercle1.rayon=2000;
						cercle1.couleur ="#006699";

						afficherCercle(cercle1.lat,cercle1.lon,cercle1.couleur,cercle1.rayon);//81000
						//document.getElementById('inner').innerHTML =(Collision(cercle1,cercle2));
					}
					
					function afficherCercle(lat,lng,couleur,rayon)
					{
						var myCity = new google.maps.Circle({
									  center:new google.maps.LatLng(lat,lng),
									  radius:rayon,
									  strokeColor:couleur,
									  strokeOpacity:0.8,
									  strokeWeight:0,
									  fillColor:couleur,
									  fillOpacity:0.4
									  });
						myCity.setMap(window.map);					
					}
					
					function lireHidden()
					{
						document.getElementById('P1_RESULT_SET').value
					}					
					
					

					google.maps.event.addDomListener(window, 'load', initialize);
					
					
					</script>
					
					<p id="inner"></p>
					<p id="inner2"></p>
					
					<input type="text" id="latitu"></input>
					<input type="text" id="longitu"></input>
					<button onclick="initialize2()">Try it</button>
					<div id="googleMap" style="width:500px; height:500px;"></div>
               </div>
           
    </body>
</html>
